<template>
    <section class="townProgress">
        <div class="townLabel" >
            {{townObject.objectName.indexOf('党委')>-1?townObject.objectName.replace(/党委/,''):townObject.objectName}}
        </div>
        <div class="townImg"></div>
        <div style="display: inline-block;margin-left: 15px">
            <el-button type="warning" v-if="townObject.status==0" ><i class="el-icon-edit"></i>暂未执行</el-button>
            <el-button type="success" v-show="townObject.status>=1" @click="showStepDetail(2,'个人申请')"><i class="el-icon-check"></i>个人申请</el-button>
            <el-button type="success" v-show="townObject.status>=2" @click="showStepDetail(3,'考察审查')"><i class="el-icon-check"></i>考察审查</el-button>
            <el-button type="success" v-show="townObject.status>=3" @click="showStepDetail(4,'镇党委会研究')"><i class="el-icon-check"></i>镇党委会研究</el-button>
            <el-button type="info" v-show="townObject.status==3" @click="showStepDetail(0,'市委审核')"><i class="el-icon-edit"></i>市委组织初审</el-button>
            <el-button type="success" v-show="townObject.status>=4" @click="showStepDetail(5,'市委组织部初审')"><i class="el-icon-check"></i>市委组织部初审</el-button>
            <el-button type="info" v-show="townObject.status==4&&(!currentTask.resultFiles)"><i class="el-icon-edit"></i>部务会研究决定</el-button>
            <el-button type="success" v-show="townObject.status>=4&&currentTask.resultFiles" @click="showStepDetail(6,'部务会研究决定')"><i class="el-icon-check"></i>部务会研究决定</el-button>
            <el-button type="success" v-show="townObject.status>=5" @click="showStepDetail(7,'颁发职级证书')"><i class="el-icon-check"></i>颁发职级证书</el-button>
        </div>
    </section>
</template>

<script>
    export default {
        name: "TownProgress",
        props:{
            currentTask:{
                type:Object
            },
            townObject:{
                type:Object
            },
            objectStatus:{
                type:String,
            }
        },
        data(){
            return{
                stepActive:1,
            }
        },
        watch:{
            'objectStatus':{
                handler:function(){
                   /* this.updateTaskObject();*/
                }
            }
        },
        methods:{
            updateTaskObject(){
                this.$http('get',`identity/cadreTaskObject/${this.townObject.id}id`,false).then(data=>{
                    this.townObject = data;
                })
            },
            showStepDetail(value,content){
                let para = Object.assign({},this.townObject);
                para.step = 'Step'+value+':'+content;
                para.stepVal = value;
                if(value==0){
                    para.step = 'Step5:'+content;
                }
                this.$emit("stepDetailVal",para);
            }
        },
        created() {
        }
    }
</script>

<style scoped>
    .townProgress{
        text-align: left;
        vertical-align: center;
    }
    .townProgress .townLabel{
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        line-height: 21px;
        height: 21px;
        border-left: 3px #55BD94 solid ;
        padding: 0 15px 0 10px;
    }
    .townProgress .townImg{
        width: 23px;
        height: 21px;
        background: url("../../static/rankProgress/stepArrowHead.png");
        display: inline-block;
        position: relative;
        top: 5px;
    }
</style>
<style>
    .townProgress .el-button--mini, .el-button--mini.is-round {
        padding: 10px 15px;
    }
    .townProgress .el-button--mini, .el-button--small {
        font-size: 14px;
    }
</style>
